import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import { Modal, Descriptions, Card, Button, Table } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getPaymentHistoryList } from './service';
import { Link } from 'umi';
import TableTitle from '@/components/TableTitle';

export default () => {
  // 控制详情弹框的显示与隐藏
  const [paymentHistoryModal, setPaymentHistoryModal] = React.useState(false)
  // 储存当前查看数据
  const [paymentHistory, setPaymentHistory] = React.useState({})
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData
  // 定义操作单元格
  const columnsRender = (text, record, _, action) => [
    <a key='check'
      onClick={() => handleDetails(record.serialNumber)}
    >
      查看
    </a>
  ]
  // 定义金额单元格
  const withdrawAmount = (text, record, _, action) => [
    <p key='withdrawAmount' style={{ textAlign: 'right', margin: 0 }}>{record.withdrawAmount}</p>
  ]
  const handlingCharge = (text, record, _, action) => [
    <p key='handlingCharge' style={{ textAlign: 'right', margin: 0 }}>{record.handlingCharge}</p>
  ]
  const amountReceived = (text, record, _, action) => [
    <p key='amountReceived' style={{ textAlign: 'right', margin: 0 }}>{record.amountReceived}</p>
  ]
  // 定义结果单元格
  const resultRender = (text, record, _, action) => [
    <div key={record.result}>
      {
        record.result === 'Processing' ?
          <p style={{ textAlign: 'center', margin: 0 }}>交易中</p> :
          record.result === 'Success' ?
            <p style={{ textAlign: 'center', margin: 0, color: '#52c41a' }}>成功</p> :
            record.result === 'Failure' ?
              <p style={{ textAlign: 'center', margin: 0, color: '#ff4d4f' }}>失败</p> :
              null
      }
    </div>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'result' ? item.render = resultRender : undefined
    item.dataIndex === 'withdrawAmount' ? item.render = withdrawAmount : undefined
    item.dataIndex === 'handlingCharge' ? item.render = handlingCharge : undefined
    item.dataIndex === 'amountReceived' ? item.render = amountReceived : undefined
    item.valueType === 'option' ? item.render = columnsRender : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  /**
   * 查看按钮回调
   * @param serialNumber 流水号
   */
  const handleDetails = async (serialNumber: string) => {
    const PaymentHistory = await getPaymentHistoryList({ serialNumber })
    setPaymentHistory(PaymentHistory.data[0])
    setPaymentHistoryModal(true)
  }

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='付款记录' />}
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => {
          return getPaymentHistoryList(params);
        }}
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'paymentHistoryList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="serialNumber"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单配置
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title="消费详情"
        width={1000}
        centered
        visible={paymentHistoryModal}
        footer={
          <Button
            type="primary"
            htmlType="submit"
            onClick={() => setPaymentHistoryModal(false)}
          >
            确认
          </Button>
        }
        onCancel={() => setPaymentHistoryModal(false)}
      >
        <Descriptions
          column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
        >
          <Descriptions.Item label="商户名">{paymentHistory.merchant}</Descriptions.Item>
          <Descriptions.Item label="会员名">{paymentHistory.created_at}</Descriptions.Item>
          <Descriptions.Item label="商品订单">{paymentHistory.withdrawWay}</Descriptions.Item>
          <Descriptions.Item label="交易流水">{paymentHistory.serialNumber}</Descriptions.Item>
          <Descriptions.Item label="交易状态">{paymentHistory.withdrawWay}</Descriptions.Item>
          <Descriptions.Item label="交易时间">{paymentHistory.withdrawAmount}</Descriptions.Item>
          <Descriptions.Item label="订单金额">{paymentHistory.withdrawCurrency}</Descriptions.Item>
          <Descriptions.Item label="订单币别">{paymentHistory.handlingCharge}</Descriptions.Item>
          <Descriptions.Item label="折扣金额">{paymentHistory.handlingChargeCurrency}</Descriptions.Item>
          <Descriptions.Item label="折扣币别">{paymentHistory.amountReceived}</Descriptions.Item>
          <Descriptions.Item label="实收金额">{paymentHistory.amountReceivedCurrency}</Descriptions.Item>
          <Descriptions.Item label="实收币别">{paymentHistory.exchangeRate}</Descriptions.Item>
          <Descriptions.Item label="折扣发放时间">{paymentHistory.result}</Descriptions.Item>
          <Descriptions.Item label="会员账号">{paymentHistory.result}</Descriptions.Item>
          <Descriptions.Item label="商户账号">{paymentHistory.result}</Descriptions.Item>
          <Descriptions.Item label="失败原因"> </Descriptions.Item>
          <Descriptions.Item label="备注"> </Descriptions.Item>
        </Descriptions>

        <Link
          to={{
            pathname: '/discount-record',
            state: { discountNumber: paymentHistory.merchant }
          }}
        >
          关联折扣查询
        </Link>

        <div
          style={{
            margin: '20px 0 15px',
            fontSize: 16
          }}
        >
          退款详情
        </div>
        <Table
          scroll={{ x: 900 }}
          pagination={false}
          bordered
          columns={refundColumns}
        />
      </Modal>
    </div>
  );
};

const refundColumns = [
  {
    title: '申请日期',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    fixed: 'left',
  },
  {
    title: '发起方',
    dataIndex: 'age',
    key: 'age',
    width: 100,
    fixed: 'left',
  },
  {
    title: '退款金额',
    dataIndex: 'address',
    width: 100,
    key: 'address',
  },
  {
    title: '币别',
    width: 61,
    key: 'tags',
    dataIndex: 'tags'
  },
  {
    title: '退款状态',
    width: 100,
    key: '1',
    dataIndex: 'tags'
  },
  {
    title: '会员退还折扣',
    width: 150,
    key: '2',
    dataIndex: 'tags'
  },
  {
    title: '币别',
    width: 61,
    key: '3',
    dataIndex: 'tags'
  },
  {
    title: '平台退还折扣',
    width: 150,
    key: '4',
    dataIndex: 'tags'
  },
  {
    title: '币别',
    width: 61,
    key: '5',
    dataIndex: 'tags'
  },
  {
    title: '推荐人退还折扣',
    width: 150,
    key: '6',
    dataIndex: 'tags'
  },
  {
    title: '币别',
    width: 61,
    key: '7',
    dataIndex: 'tags'
  },
  {
    title: '商户费返还折扣',
    width: 150,
    key: '8',
    dataIndex: 'tags'
  },
  {
    title: '币别',
    width: 61,
    key: 'action',
    dataIndex: 'tags'
  },
  {
    title: '退款原因',
    width: 100,
    key: '9',
    dataIndex: 'tags'
  },
  {
    title: '退款流水',
    width: 100,
    key: '10',
    dataIndex: 'tags'
  },
  {
    title: '折扣退还查看',
    key: '11',
    dataIndex: 'tags',
    fixed: 'right',
    width: 150,
    render: () => <a>action</a>,
  },
];
